<template>
    <div class="prize-check-more-alert" id="sortBoard">
        <div class="alert-wrap" v-if="list">
            <div class="prize-step-resore-wrap pump-alert-top">
                <span class="prize-alert-top1"><span class="prize-alert-top2"><span class="prize-alert-top3"></span></span></span>
                <img class="sort-header" :src="staticImageUrl('images/sort_header.png')" alt=""/>
                <span class="prize-step-resore-title">{{boardName}}</span>
            </div>
            <ul class="ranking-list-wrap">
                <li class="prize-alert-box-shadow"></li>
                <li v-for="(item,index) in list" :key="index" class="ranking-list">
                        <span class="ranking-list-msg">
                            <span v-if="boardType == 'sort'">{{index + 1}}</span>
                            <img class="ranking_user_touxiang ranking-user-photo ranking-teamer-img"
                                 :src="item.photo"/>
                            <span class="ranking-username">{{item.name.slice(0, 3)}}</span>
                            <span class="pfrd-ellipsis">***</span>
                        </span>
                    <span class="ranking-get-discount" v-if="item.helpPrice">+¥{{item.helpPrice}}</span>
                    <span class="ranking-get-discount" v-if="item.rewardStr || item.completedTime">{{item.rewardStr ? item.rewardStr : item.completedTime}}
                            {{item.buyed?'购买成功':'打气完成'}}</span>
                    <slot name="rankingItemDescription"></slot>
                </li>
            </ul>
        </div>
        <v-bord>
            <div slot="cantClick" @click="$emit('clickFn')" class="com_black"></div>
        </v-bord>
    </div>
</template>

<script>
    import Bord from './Bord';
    export default {
        name: "Alert",
        date(){
            return{
                boardName:'排行榜',
            }
        },
        props:{
            list:{
                type:Array
            },
            boardType:{
                type:String
            },
            boardName:{
                type:String
            }
        },
        mounted(){
            $('body,html').addClass('ovfHiden');
        },
        methods:{
        },
        components:{
            'v-bord':Bord
        },
        destroyed(){
            $('body,html').removeClass('ovfHiden');
        }
    }
</script>

<style scoped lang="scss">
    .prize-alert-top1{
        height: .21rem;
        width: 106%;
        left: -3%;
        background: #fa7b95;
        border-radius: 25px;
        position: absolute;
        bottom: -.05rem;
        display: inline-block;
        .prize-alert-top2 {
            display: inline-block;
            height: .19rem;
            width: 100%;
            position: relative;
            background: #e45976;
            top: .02rem;
            -webkit-border-radius: .25rem;
            -moz-border-radius: .25rem;
            border-radius: .25rem;
        }
        .prize-alert-top3 {
            display: inline-block;
            height: .06rem;
            width: 96%;
            position: relative;
            left: 2%;
            background: #d23153;
            -webkit-border-radius: .25rem;
            -moz-border-radius: .25rem;
            border-radius: .25rem;
        }
        .ranking-list {
            display: flex;
            display: -webkit-flex;
            justify-content: space-between;
            -webkit-justify-content: space-between;
            padding-left: .1rem;
            padding-right: .1rem;
            height: .65rem; }
    }
    .prize-alert-box-shadow{
        width: 100%;
        height: .001rem;
        box-shadow: 0 0.1rem 0.1rem 0.03rem #ffb7c6;
        position: absolute;
        top: -.08rem;
        left: 0;
    }
    .alert-wrap {
        width: 3rem;
        border: none;
        min-height: .1rem;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: #fff;
        z-index: 1050;
        font-size: 14px; }
    .prize-check-more-alert  {
        .prize-step-resore-wrap{
            position: absolute;
            top: -.7rem;
            width: 3.14rem;
            left: -.07rem;
        }
        .prize-step-resore-title {
            font-size: .17rem;
            position: absolute;
            color: #e45976;
            left: 50%;
            top: 50%;
            transform: translateX(-50%);
            margin: auto; }
        .ranking-list-wrap{
            position: relative;
            top: -.17rem;
            margin-top: .17rem;
            background-color: #fff;
        }
        .pump-alert-top{
            top: -.6rem;
        }
    }
    .sort-header {
        width: 160px;
        position: relative;
        left: 0;
        display: block;
        right: 0;
        margin: auto;
        top: -5px; }
</style>